<template>
   <div id="productList">
   <div class="productListContainer">
   <el-breadcrumb separator="/">
  <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
  <el-breadcrumb-item>{{sceneName}}</el-breadcrumb-item>
</el-breadcrumb>
     <el-row :gutter="5">
  <el-col :lg="{span: 5, offset: index > 0 ? 1 : 1}" :md="{span: 7, offset: 1}" :sm="{span: 10, offset: 1}" :xs="{span: 12}" v-for="(productItem, index) in productListData" >
    <el-card :body-style="{ padding: '0px' }">
     <router-link :to="{ path: 'product', query: { productId: productItem.productId }}">
      <img :src="productItem.miao" class="image">
      </router-link>
      <div style="padding: 14px;">
        <span class="productName">{{productItem.name}}</span>
        <div class="bottom clearfix">
          <time class="time">{{ productItem.pubTime }}</time>
         <p class="money">{{ productItem.price }}</p>
        </div>
      </div>
    </el-card>
  </el-col>
</el-row>
   </div>


   </div>
</template>


<script>
export default{
    name: 'productList',
  data () {
    return {
      //sceneName:this.$route.query.sceneName
      productListData: [],
    }
  },
  computed: {
    sceneName() {
      return this.$route.query.sceneName
    }
  },
  mounted (){
    this.getSceneName();
    this.getProductListData();
  },
  methods: {
    getSceneName: function(){
      this.sceneName = this.$route.query.sceneName
    },
    getProductListData: function(){
        this.$http.get('static/data/productList.json').then((response) => {
                   this.productListData= response.body;
                })
                .catch(function(response) {
                    console.log(response)
                })
    }
  }
}
</script>

<style type="text/css">
  .el-card__body img{
    width: 100%
  }
  .el-card{
    margin-bottom: 15px;
  }
  .productName{
    overflow-x: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    width: 100%;
  }
  .time,.money{
    text-align: center;
    display: inline-block;
    width: 100%
  }
  .clearfix {
     margin-left: 0px; 
}
#productList .clearfix {
    margin-top: 5px;
}
.money{
  margin-bottom: 0px;
  margin-top:5px;
}
  
  @media (min-width: 1200px){
    .productListContainer {
      width:1200px;margin:0 auto
    }
    .el-breadcrumb{
    margin-left: 50px;
    margin-bottom: 20px;
   }
  
  }

  @media (min-width: 992px) and (max-width: 1199px){
  .el-breadcrumb{
    margin-left: 50px;
    margin-bottom: 20px;
   }
   .productListContainer {
      width:1000px;margin:0 auto;    margin-right: 25px;

    }
    }

    @media (min-width: 768px) and (max-width: 991px){
  .el-breadcrumb{
    margin-left: 50px;
    margin-bottom: 20px;
   }
   .productListContainer {
     

    }
}

@media (max-width: 767px){

  .el-breadcrumb{
    margin-left: 8px;
    margin-bottom: 20px;
   }
   .el-card {
    margin-left: 8px;
    margin-right: 8px
}


}

</style>